<template>
  <d2-container>
    <template slot="header">
      <el-form
        :inline="true"
        :model="queryForm"
        ref="queryForm"
        size="mini"
        style="margin-bottom: -18px;">

        <el-form-item label="产品名称" prop="name">
          <el-input
            v-model="queryForm.meterName"
            style="width: 200px;"/>
        </el-form-item>
        <el-form-item label="产品型号" prop="equipmentType">
          <el-input
            v-model="queryForm.meterModel"
            style="width: 200px;"/>
<!--          <el-select v-model="queryForm.equipmentType" clearable style="width: 200px;">-->
<!--            <el-option v-for="(item,index) in equipmentTypeList" :key="index" :label="item.label" :value="item.value"></el-option>-->
<!--          </el-select>-->
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            @click="handleFormSubmit">
            <d2-icon name="search"/>
            查询
          </el-button>
        </el-form-item>

      </el-form>
    </template>
    <d2-crud
      ref="d2Crud"
      :columns="columns"
      :data="data"
      :loading="loading"
      :pagination="pagination"
      @pagination-current-change="paginationCurrentChange"
      selection-row
      @selection-change="handleSelectionChange"
      :form-options="formOptions"
      :rowHandle="rowHandle"
      @dialog-open="handleDialogOpen"
      @dialog-cancel="handleDialogCancel"
      add-title="新增型号"
      :add-template="addTemplate"
      :add-rules="addRules"
      @row-add="handleRowAdd"
      edit-title="修改型号"
      :edit-template="addTemplate"
      :edit-rules="addRules"
      @row-edit="handleRowEdit"
      @row-remove="handleRowRemove"
    >
      <el-button slot="header" style="margin-bottom: 5px" @click="addRow" size="mini">新增</el-button>
      <el-button slot="header" style="margin-bottom: 5px" @click="deleteRows" size="mini">删除</el-button>
    </d2-crud>
  </d2-container>
</template>

<script>

export default {
  name: 'equipmentmodel',
  data () {
    return {
      queryForm: {
        meterModel: '', // 产品型号
        meterName: '' // 产品名称
      },
      meterAgreeList: [], // 通信协议列表
      wiringList: [], // 接线方式列表
      meterCalList: [], // 口径列表
      decimalPointList: [], // 小数位
      archivesTypeList: [], // 表计类型type列表
      loading: false,
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      columns: [
        {
          title: '序号',
          key: 'id',
          width: 80,
          sortable: true
        },
        {
          title: '型号编号',
          key: 'modelSerialnumber'
        },
        {
          title: '产品名称',
          key: 'meterName',
          sortable: true
        },
        {
          title: '能源类型',
          key: 'energyTypeName',
          sortable: true
        },
        {
          title: '产品型号',
          key: 'meterModel',
          sortable: true
        },
        {
          title: '通信协议',
          key: 'meterAgreeName',
          sortable: true
        },
        {
          title: '接线方式',
          key: 'meterWiringWayName',
          sortable: true
        },
        {
          title: '口径',
          key: 'meterCalName',
          sortable: true
        },
        {
          title: '小数位',
          width: 90,
          key: 'decimalPoint',
          sortable: true
        },
        {
          title: '供应商',
          key: 'supplierName',
          sortable: true
        },
        {
          title: '描述',
          key: 'meterMemo'
        }
      ],
      data: [],
      addTemplate: {
        meterName: {
          title: '产品名称',
          value: ''
        },
        meterModel: {
          title: '产品型号',
          value: ''
        },
        modelSerialnumber: {
          title: '型号编号',
          value: '',
          component: {
            // disabled: true
          }
        },
        meterAgree: {
          title: '通信协议',
          value: '',
          component: {
            name: 'el-select',
            options: []
          }
        },
        meterWiringWay: {
          title: '接线方式',
          value: '',
          component: {
            name: 'el-select',
            options: []
          }
        },
        meterCal: {
          title: '口径',
          value: '',
          component: {
            name: 'el-select',
            options: []
          }
        },
        supplier: {
          title: '供应商',
          value: '',
          component: {
            name: 'el-select',
            options: []
          }
        },
        decimalPoint: {
          title: '小数位',
          value: '',
          component: {
            name: 'el-select',
            options: []
          }
        },
        archivesType: {
          title: '表计类型',
          value: '',
          component: {
            name: 'el-select',
            options: []
          }
        },
        meterMemo: {
          title: '描述',
          value: ''
        }
      },
      formOptions: {
        labelWidth: '100px',
        labelPosition: 'left',
        saveLoading: false
      },
      addRules: {
        meterName: [{ required: true, message: '请输入产品名称', trigger: 'blur' }],
        meterModel: [{ required: true, message: '请输入产品型号', trigger: 'blur' }],
        modelSerialnumber: [{ required: true, message: '请输入型号编号', trigger: 'change' }],
        meterAgree: [{ required: true, message: '请选择通信协议', trigger: 'change' }],
        meterWiringWay: [{ required: true, message: '请选择接线方式', trigger: 'change' }],
        meterCal: [{ required: true, message: '请选择口径', trigger: 'change' }],
        supplier: [{ required: true, message: '请选择供应商', trigger: 'change' }],
        decimalPoint: [{ required: true, message: '请选择小数位', trigger: 'blur' }],
        archivesType: [{ required: true, message: '请选择表计类型', trigger: 'blur' }],
        meterMemo: [{ required: true, message: '请输入描述', trigger: 'blur' }]
      },
      rowHandle: {
        columnHeader: '操作',
        width: 160,
        edit: {
          text: '编辑'
        },
        remove: {
          text: '删除'
        }
      },
      selectionRow: []
    }
  },
  mounted () {
    this.initData()
    this.fetchData()
  },
  methods: {
    initData () {
      this.$api.admin_metermodel_getEquipmentType().then(res => {
        console.log(res)
        // 通信协议
        if (res.agree) {
          this.meterAgreeList = res.agree.map(i => {
            return {
              value: i.value,
              label: i.desc
            }
          })
          this.addTemplate.meterAgree.component.options = this.meterAgreeList
        }
        // 接线方式
        if (res.wiring) {
          this.wiringList = res.wiring.map(i => {
            return {
              value: i.value,
              label: i.desc
            }
          })
          this.addTemplate.meterWiringWay.component.options = this.wiringList
        }
        // 口径
        if (res.cal) {
          this.meterCalList = res.cal.map(i => {
            return {
              value: i.value,
              label: i.desc
            }
          })
          this.addTemplate.meterCal.component.options = this.meterCalList
        }
        // 小数位
        if (res.decimalPoint) {
          this.decimalPointList = res.decimalPoint.map(i => {
            return {
              value: i.value,
              label: i.desc
            }
          })
          this.addTemplate.decimalPoint.component.options = this.decimalPointList
        }
        // 表计类型
        if (res.archives) {
          this.archivesTypeList = res.archives.map(i => {
            return {
              value: i.value,
              label: i.desc
            }
          })
          this.addTemplate.archivesType.component.options = this.archivesTypeList
        }
      })
      this.$api.admin_supplier_getList().then(res => {
        const options = res.map(i => {
          return {
            value: i.id,
            label: i.supplierName
          }
        })
        this.addTemplate.supplier.component.options = options
      })
    },
    paginationCurrentChange (currentPage) {
      this.pagination.currentPage = currentPage
      this.fetchData()
    },
    fetchData () {
      this.loading = true
      this.$api.admin_metermodel_getPageList({
        pageNum: this.pagination.currentPage,
        pageSize: this.pagination.pageSize,
        ...this.queryForm
      }).then(res => {
        this.data = res.data
        this.pagination.total = res.total
      }).catch(err => {
        console.log('err', err)
      }).finally(() => {
        this.loading = false
      })
    },
    // handleFormDataChange ({ key, value }) {
    //   console.log(key, value)
    //   this.addTemplate.modelSerialnumber.component.disabled = true
    //   if (key == 'equipmentType') {
    //     this.$refs.d2Crud.setFormField('equipmentloratype', '')
    //     this.$refs.d2Crud.setFormField('equipmentnbtype', '')
    //     // 控制子类型是否显示
    //     if (value == 1) {
    //       this.addTemplate.equipmentloratype.component.show = true
    //       this.addTemplate.equipmentnbtype.component.show = false
    //     } else if (value == 2) {
    //       this.addTemplate.equipmentloratype.component.show = false
    //       this.addTemplate.equipmentnbtype.component.show = true
    //     }
    //   }
    // },
    handleFormSubmit () {
      this.pagination.currentPage = 1
      this.fetchData()
    },
    addRow () {
      this.$refs.d2Crud.showDialog({
        mode: 'add'
      })
    },
    handleRowAdd (row, done) {
      this.formOptions.saveLoading = true
      this.$api.admin_metermodell_add(row).then(res => {
        this.$message({
          message: '保存成功',
          type: 'success'
        })
        this.fetchData()
        done()
      }).finally(() => {
        this.formOptions.saveLoading = false
      })
    },
    handleDialogOpen ({ mode, row, index }) {
      if (mode === 'edit') {
        this.$api.admin_metermodell_get({ id: row.id }).then(res => {
          this.$refs.d2Crud.setFormData(res)
          console.log(res)
          this.addTemplate.modelSerialnumber.component.disabled = true
          // // 控制子类型是否显示
          // if (res.equipmentType == 1) {
          //   this.addTemplate.equipmentloratype.component.show = true
          //   this.addTemplate.equipmentnbtype.component.show = false
          // } else if (res.equipmentType == 2) {
          //   this.addTemplate.equipmentloratype.component.show = false
          //   this.addTemplate.equipmentnbtype.component.show = true
          // }
        })
      }
    },
    handleDialogCancel (done) {
      done()
    },
    handleRowEdit ({ index, row }, done) {
      this.formOptions.saveLoading = true
      this.$api.admin_metermodell_update(row).then(res => {
        this.$message({
          message: '保存成功',
          type: 'success'
        })
        this.fetchData()
        done()
      }).finally(() => {
        this.formOptions.saveLoading = false
      })
    },
    handleRowRemove ({ index, row }, done) {
      this.$api.admin_metermodell_delete([row.id]).then(res => {
        this.$message({
          message: '删除成功',
          type: 'success'
        })
        this.fetchData()
        done()
      })
    },
    handleSelectionChange (selection) {
      this.selectionRow = selection
    },
    deleteRows () {
      this.$confirm('确定删除吗?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      })
        .then(() => {
          this.$api.admin_metermodell_delete(this.selectionRow.map(item => item.id)).then(res => {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.fetchData()
          })
        })
    }
  }
}
</script>
